<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/14
  Time: 13:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加新闻界面</title>
    <!--引入elementui的样式-->
    <!-- 引入外部样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!-- 引入相关插件，也叫依赖-->
    <!--引入vue的依赖，必须在elementui之前引入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <%--    <script type="text/javascript" src="js/wangEditor.min.js"></script>--%>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <style>
        #addNews {
            width: 600px;
            height: 100%;
        }

        #xinwen {
            width: 400px;
            line-height: 9;
        }
        .w-e-text-container{
            z-index:0 !important;
        }
        .w-e-toolbar{
            z-index:1 !important;
        }
        /*.w-e-text-container{*/
        /*    z-index:0 !important;*/
        /*}*/
    </style>
</head>
<body>
<div id="app">

    <%-- 添加新闻 --%>
    <div id="addNews">
        <el-form ref="addFormRef" :model="addForm" label-width="130px">
            <el-form-item label="新闻标题" prop="newsTitle">
                <el-input v-model="addForm.newsTitle" id="xinwen"></el-input>
            </el-form-item>
            <el-form-item label="新闻发布者" prop="newsAuthor">
                <el-input v-model="addForm.newsAuthor" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item label="新闻类别" prop="kindId">
                <el-select v-model="addForm.kindId" placeholder="请选择新闻类别" style="width: 180px">
                    <el-option

                            v-for="item in news"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">

                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="新闻发布时间" prop="newsTime">
                <el-date-picker
                        v-model="addForm.newsTime"
                        type="datetime"
                        placeholder="选择日期"
                        id="xinwen">
                </el-date-picker>
            </el-form-item>
<%--            <el-form-item label="新闻发布内容" prop="newsContent">--%>
<%--                <el-input type="textarea"--%>
<%--                          v-model="addForm.newsContent"--%>
<%--                          id="xinwen">--%>
<%--                </el-input>--%>
<%--            </el-form-item>--%>
            <el-form-item>
                <div id="div1"  ref="info">
                    <span    v-model="addForm.newsContent"></span>
                </div>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addSubmit()">上传</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

    </div>


</div>
</body>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            //定义添加新闻表单的数据变量
            addForm: {},
            //定义所有新闻信息对象
            news: [],
            test:'',
        },
        created() {
            this.initTable();
        },
        //页面加载完成
        mounted(){
            this.$nextTick(()=>{
                //赋值为空
                this.test = this.$refs.info.innerHTML
            })



        },
        methods: {
            initTable() {
                console.log("11111111")
                axios.get("/kind/list").then(resp => {
                    this.news = resp.data.data;
                })
            },
            renderTime(date) {
                var dates = new Date(date).toJSON();
                return this.news.newsTime = new Date(+new Date(dates) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')

            },
            addSubmit() {
                this.addForm.newsTime = this.renderTime( this.addForm.newsTime);
                //将富文本框中转化成html在转化为json赋值给newsContent
                // this.addForm.newsContent = JSON.stringify(this.$refs.info.innerHTML)
                this.addForm.newsContent = editor.txt.html();
                // console.log(this.$refs.info.innerHTML);
                // console.log(this.$refs.info);
                if(this.addForm.newsTitle!=null && this.addForm.newsAuthor!=null){
                    axios.post("/news/add", this.addForm).then(resp => {
                        if (resp.data.code === 200) {
                            // location.href="/newsAudit.jsp";
                            this.$message.success("上传成功");
                            //清空表单
                            this.$refs.addFormRef.resetFields();
                            //清空富文本框
                            this.$refs.info.innerHTML = this.test;
                        }
                    })
                }
            },

        },
    });

    const E = window.wangEditor;
    const editor = new E("#div1");
    editor.create();
    // 或者 const editor = new E(document.getElementById('div1'))
    // editor.config.onchange = function () {
    //     app.addNews.content = editor.txt.html();
    // }

    //富文本编辑
    // window.onload = () => {
    //     const editor = new wangEditor("#div1");
    //     editor.config.onchange = function () {
    //
    //         app.addNews.content = editor.txt.html();
    //         // JSON.stringify(editor.txt.getJSON())
    //     }
    //     editor.create();
    // }
</script>
</html>